<template>
  <div class="login-container">
    <div class="login-box"
    :class="{ 'box-shadow-hover': isHover }"
      @mouseover="isHover = true"
      @mouseleave="isHover = false">
      <h2>LOGIN</h2>
      <div class="user-type">
        <label>Choose Identity：</label>
                <select v-model="usertype">
                    <option value="patron">patron</option>
                    <option value="admin">admin</option>
                </select>
      </div>
      <div class="input-group">
        <input type="text" v-model="email" placeholder="email">
        <span v-if="!email" class="placeholder">your email</span>
      </div>
      <div class="input-group">
        <input type="password" v-model="password" placeholder="password">
        <span v-if="!password" class="placeholder">password</span>
      </div>
      <button class="login_button" 
      :class="{ 'button-shadow-hover': Blogin_isHover }"
      @mouseover="Blogin_isHover = true"
      @mouseleave="Blogin_isHover = false"
      @click="login">login</button>
      <br>
      <br>
      <button class="register_button" 
      :class="{ 'button-shadow-hover': Bregister_isHover }"
      @mouseover="Bregister_isHover = true"
      @mouseleave="Bregister_isHover = false"
      @click="register">register</button>
   
      <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
    </div>
  </div>
</template>

<script>
// 引入axios库，用于发送HTTP请求
import axios from 'axios';
export default {
  name: "Login",
  data() {
    return {
      isHover: false,
      Blogin_isHover:false,
      Bregister_isHover:false,
      usertype: "",
      email: "",
      password: "",
      errorMessage: ""
    };
  },
  methods: {
    login() {
      if (!this.email || !this.password || !this.usertype) {
    this.errorMessage = "请输入账号、密码和用户类型";
    return;
  }
      // 构造登录请求的数据
      const requestData = {
        email: this.email,
        password: this.password,
        usertype:this.usertype
      };

      // 发送登录请求
      this.$request.post("/user/login", requestData)
        .then(response => {
          // 根据响应处理登录结果
          if (response.data.message === "Login successful!") {
            // 登录成功，将用户ID存储为全局变量
            this.$globalVariable.userid = response.data.data.userid;
            localStorage.setItem('userid', response.data.data.userid);
            console.log('ID:', this.$globalVariable.userid);


            // 登录成功，根据返回的用户类型跳转到对应界面
            if (response.data.data.usertype === "admin") {
              this.$router.push({ name: "adminHomeView" });
            } else if (response.data.data.usertype === "patron") {
              this.$router.push({ name: "userHomeView" });
            }
          } else {
            // 其他状态码视为登录失败，显示错误消息
            this.errorMessage = "账号或密码错误" ;
          }
        })
        .catch(error => {
          // 捕获网络错误等异常情况
          this.errorMessage = "登录失败：" + error.message;
        });
    },
    register() {
      // 处理注册逻辑，跳转到注册页面
    }
  }
};
</script>


<style scoped>
.login-container {
  background-image: url('背景.png');
  background-size: cover; 
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.login-box {
  background-color: rgba(255, 255, 255, 0.7);
  width: 360px;
  padding: 40px;
  border: 1px solid #ccc;
  border-radius: 5px;
  transition: box-shadow 0.3s ease;
}
.box-shadow-hover {
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}

h2 {
  text-align: center;
}

.user-type {
  margin-bottom: 20px;
  vertical-align: -2px;
}

.input-group {
  margin-bottom: 10px;
}

input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.placeholder {
  color: #aaa;
  font-size: 12px;
}

button{
  width: 100%;
  padding:10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}
.button-shadow-hover {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); /* 悬停时添加阴影效果 */
}
.error-message {
  color: red;
  text-align: center;
  margin-top: 10px;
}
</style>